import React, { useEffect, useState } from 'react'
import { Table, Button, Modal, notification } from 'antd'
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons'
import { getArticle,delArticle,updateAuditStateArticle } from "../../../api/api"

export default function NewsDraft(props) {
  const [dataSource, setDataSource] = useState([]);
  const { id } = JSON.parse(localStorage.getItem("token"))
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '文章标题',
      dataIndex: 'title',
      width: 250,
      render: (title, item) => {
        return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
      }
    },
    {
      title: '文章分类',
      dataIndex: 'classifyName',
    },
    {
      title: 'VIP文章',
      dataIndex: 'vip',
      render: (vip) => {
        return vip ? '是' : '否'
      }
    },
    {
      title: '作者',
      dataIndex: 'nickname',
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMethod(item)} />
            <Button shape="circle" icon={<EditOutlined />} onClick={() => {
              props.history.push(`/news-manage/update/${item.id}`)
            }} />
            <Button type="primary" shape="circle" icon={<UploadOutlined />} onClick={() => {
              //修改文章审核状态
              updateAuditStateArticle({
                id: item.id,
                auditState: 1,
              })
              setDataSource(dataSource.filter(data => data.id !== item.id))
              notification.info({
                message: '通知',
                description: `您可以到审核列表中查看您的新闻`,
                placement: "bottomRight",
              });
            }} />
          </div>
        )
      }
    },
  ]
  useEffect(() => {
    const httpRequest = async () => {
      //获取文章
      const res = await getArticle({
        id,
        auditState: 0
      })
      setDataSource(res.data.data)
    }
    httpRequest()
  }, [id])
  const confirmMethod = (item) => {
    Modal.confirm({
      title: '你确定要删除？',
      icon: <ExclamationCircleOutlined />,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        deleteMethod(item)
      }
    });
  }
  const deleteMethod = (item) => {
    // console.log(item);
    setDataSource(dataSource.filter(data => data.id !== item.id))
    //删除文章
    delArticle({
      id: item.id
    })
  }
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} rowKey={(item) => item.id} pagination={{
        pageSize: 5,
        pageSizeOptions:[]
      }} />
    </div>
  )
}
